
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
    <style>
        input::-webkit-input-placeholder{color: #BBBBBB;font-size: 14px;}
        input::-moz-placeholder{color: #BBBBBB;font-size: 14px;}

		.info-box{width: 100%;background: #FFFFFF;padding: 0 15px;box-sizing: border-box;}
		.info-box .info-one{align-items: center;height: 50px;}
        .info-box .info-one .text{width: 80px;flex-shrink: 0;}
		.info-box .info-one input{padding: 10px 0;line-height: 30px;box-sizing: border-box;color: #333333;}
		.info-box .info-one.goto{background: url(../../../image/main3/main3_goto.png) no-repeat right center;background-size:14px;padding-right: 16px;}
		.moren-btn{height: 50px;line-height: 50px;background: #FFFFFF;padding-left: 26px;box-sizing: border-box;background: url(../../../image/main2/sel_icon0.png) no-repeat left center;background-size:20px;}
 		.moren-btn.on{background: url(../../../image/main2/sel_icon1.png) no-repeat left center;background-size:20px;}

        /*协议*/
    	.moren{font-size: 13px;color:#333333;line-height: 30px;padding: 10px 15px;box-sizing: border-box;align-items: center;}
    	.moren .sel-box{width: 16px;height: 16px;background: url(../../../image/login/sel_0.png) no-repeat left center;background-size:16px;margin-right: 10px;}
    	.moren.on .sel-box{background: url(../../../image/login/sel_1.png) no-repeat left center;background-size:16px;}

    </style>
</head>

<body>

    <div id="vue">

        <div class="info-box">
        	<div class="info-one flex border-bottom">
        		<div class="text">收货人</div>
        		<input class="flex1" type="text" maxlength="20" id="uname" placeholder="请输入收件人姓名" />
        	</div>
        	<div class="info-one flex border-bottom">
        		<div class="text">联系电话</div>
        		<input class="flex1" type="tel" maxlength="11" id="phone" placeholder="请输入收件人手机号"/>
        	</div>
        	<div class="info-one flex goto border-bottom" onclick="cityClick(this)">
        		<div class="text">收货地址</div>
        		<input class="flex1" type="text" readonly="readonly" id="qustr" placeholder="选择所在省份、城市、区县"/>
        	</div>
        	<div class="info-one flex">
        		<div class="text">详细地址</div>
                <input class="flex1 address" name="name"  maxlength="100" id="address" placeholder="楼牌号详细地址"></input>
        	</div>
        </div>
        <div class="moren flex" tapmode onclick="sel_moren(this)">
            <div class="sel-box"></div>设为默认
        </div>

        <div class="warp-btn" id="app-footer" tapmode onclick="upAddrData()">
            <div class="btn">保存</div>
        </div>

    </div>



<script type="text/javascript" src="../../../script/base.min.js" id="loadjs" data-js="L/h-tool"></script>
<script type="text/javascript">

	define(function (require, exports, module) {
        lanYun.setFooter('app-footer');

		var pageParam = api.pageParam;
	    var Citys = null;
	    var sdata = {};
        var moren = 0;
	    sdata = pageParam;

	    lanYun.newVue('#vue',function(){});

        //编辑地址
        if(pageParam && pageParam.type == "edit"){
            $('#uname').val(pageParam.uname);
	        $('#phone').val(pageParam.phone);
	        $('#address').val(pageParam.address);
            $('#qustr').val(pageParam.qustr);
            moren = pageParam.default;
            if(pageParam.default == 1){
                $('.moren').addClass('on');
            }
        }

        // 提交数据
	    upAddrData = function() {
	        sdata.uname = $('#uname').val();
	        sdata.phone = $('#phone').val();
	        sdata.address = $('#address').val();
            sdata.default = moren;
	        if(!sdata.uname){
	            lanYun.toast('请填写收货人姓名');
	            return;
	        }
	        if(!sdata.phone) {
	            lanYun.toast('请填写收货人电话');
	            return;
	        }
	        if(!TOOL.check.isMobile(sdata.phone)) {
	            lanYun.toast('请输入正确的电话');
	            return;
	        }
	        if(!sdata.qustr){
	            lanYun.toast('请选择地区');
	            return;
	        }
	        if(!sdata.address){
	            lanYun.toast('请填写详细地址');
	            return;
	        }
	        //console.log(JSON.stringify(sdata));

            if(sdata.type == "add"){
                var url = 'store/Tuiaddress/add';
            }else {
                var url = 'store/Tuiaddress/edit';
            }
	        lanYun.post( url , sdata , function(ret) {
	            if(ret.errcode == 0){
	                lanYun.toast(ret.msg);
	                lanYun.setStorage('reshpage',1);
                    setTimeout(function(){
						api.closeWin();
					},500)
	            }else{
	                lanYun.toast(ret.msg);
	            }
	        },2);
	    };

	    cityClick = function (tis) {
            var Citys = lanYun.getStorage("cityData");
            //console.log(JSON.stringify(Citys));
	        var UIActionSelector = api.require('UIActionSelector');
	        UIActionSelector.open({
	            datas:Citys,
	            iPhoneXBottomHeight:0,
	            lineColor:'#EBEBEB',
	            layout:{row:6,col:3,height:30,size:15,sizeActive:15,rowSpacing:5,colSpacing:10,maskBg:'rgba(0,0,0,0.2)',
	            bg:'#fff',color:'#999',colorActive:'#333333',colorSelected:'#333333',leftMargin:15,rightMargin:15,},
	            animation : true,
	            cancel:{text:'取消',size:15,w:50,h:35,bg:'none',bgActive:'none',color:'#333333',colorActive:'#333333'},
	            ok : {text:'确定',size:15,w:50,h:35,bg:'none',bgActive:'none',color:'#333333',colorActive:'#333333'},
	            title:{text:'',size:12,h:44,bg:'#fff',color:'#888'},
	            actives:sdata.id,
	        }, function(ret, err){
	            //console.log(JSON.stringify(ret));
	            if (ret.eventType == 'ok') {
	                sdata.qustr = ret.level1 +','+ ret.level2 +','+  ret.level3;
	                $('#qustr').val(sdata.qustr);
	                sdata.quid = [];
	                sdata.quindex = [];
	                $.each(ret.selectedInfo, function(k,v){
	                    sdata.quid.push(v.code);
	                    sdata.quindex.push(v.id);
	                });
                    var data = sdata.quid;
                    sdata.quid = data.join(",");
                    //console.log(sdata.quid);
	            }
	        });
	    }

        // 选择默认
        sel_moren = function (tis){
            if($(tis).hasClass('on')){
                $(tis).removeClass('on');
                moren = 0;
            }else {
                $(tis).addClass('on');
                moren = 1;
            }
        }

	});
</script>
</body>
</html>
